<template>
  <div class="wrap">
    <img class="monster" src="/static/monster.png" alt="">
    <div class="content">
      <div class="head">
        第{{page}}章
        <div class="energy">
          <energyBox v-if="energy!=undefined&&dataInfo&&sysConfig" :energy="energy" :baseTime="sysConfig.baseTime" :isSub="isSub" :countTime="dataInfo.intervalTimer" @add="showAddEnergy()"></energyBox>
        </div>
      </div>
      <div class="grade-box">
        <div class="grade-item" v-for="(item,index) in cardList" :key="index" @click="play(item,index)">
          <div class="grade">
            <img mode="aspectFit" :src="'/static/'+(index+1)+'.png'" alt="">
            <!-- {{index+1}} -->
          </div>
          <div class="current">{{item.innerCard}}/10</div>
          <div class="tag" :class="{passed:item.complete,wait:item.waitOpen}" @click.stop="showFriendRank(item)">
            <div class="lock" v-if="item.lockType||((item.friendList.length==0&&!item.complete)&&!item.waitOpen)">
              <!-- 未解锁 -->
              <img src="/static/question.png" alt="">
            </div>
            <!-- 通关 -->
            <img class="pass" v-if="item.complete" src="/static/passWord.png" alt="">
            <!-- 前方有好友 -->
            <img class="backward" v-if="item.friendList.length>0&&!item.waitOpen" :src="item.friendList[0].obj.headImgUrl">
            <!-- 待解锁 -->
            <div class="wait-open-tag" v-if="item.waitOpen">
              <!-- 未解锁 -->
              <img src="/static/energy.png" alt=""> X5
            </div>
          </div>
          <!-- 通关遮罩 -->
          <div class="pass-mask" v-if="item.complete">
            <img src="/static/gou.png" alt="">
          </div>
          <!-- 未解锁遮罩 -->
          <img class="lock-mask" v-if="item.lockType" src="/static/lockBg.png" alt="">
          <!-- 等待解锁 -->
          <div class="wait-mask" v-if="item.waitOpen">
            <img src="/static/waitOpen.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 无体力弹窗 -->
    <outEnergy v-if="isEnergyBox" @leftClick="addEnergyByPay()" @close="closeNoEnergy()" type="energy"></outEnergy>
    
    <!-- <skipCardBox v-if="isEnergyBox" @leftClick="closeNoEnergy()" @rightClick="addEnergyByPay()" @close="closeNoEnergy()" type="energy"></skipCardBox> -->
    <!-- 补充体力 -->
    <skipCardBox v-if="isAddEnergy" @leftClick="isAddEnergy=false" @rightClick="addEnergyByPay()" @close="isAddEnergy=false" type="addEnergy"></skipCardBox>
    <!-- 好友排行弹窗 -->
    <currentCardRank v-if="isFriendRank" :list="friednRankList" @close="isFriendRank=false"></currentCardRank>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import energyBox from "./components/energyBox";
import currentCardRank from "./components/currentCardRank";
import {shareInfo} from "@/config/shareInfo"

const dataStack = [];
export default {
  components: {
    energyBox,
    currentCardRank
  },
  data() {
    return {
      shareInfo:shareInfo,
      type: 2,
      isEnergyBox: false,
      isAddEnergy: false,
      isFriendRank: false,
      isSub: false, //控制解锁关卡体力效果
      lastPage: 0,
      lastCard: 0,
      isPass: true,
      page: 0, //第几章
      card: 0, //当前页关卡 (160 - 90)/10 取整
      cardCount: 9, //每页关卡数
      smallCard: 0, //关卡第几题
      dataInfo: {}, //关卡信息,
      cardList: [], //关卡列表,
      friednRankList: []
    };
  },

  computed: {
    ...mapState([
      "sysConfig",
      "energy",
      "lockCard",
      "maxEnergy",
      "appInfo",
      "globalAudioContext"
    ])
  },

  methods: {
    ...mapMutations(["setEnergy"]),
    getData() {
      //获取关卡数据
      this.fly.post("/getLastCardNumber").then(res => {
      
          this.dataInfo = res.data.Result;
          this.lastPage = Math.ceil(
            this.dataInfo.totalCardNumber /
              (this.cardCount * this.sysConfig.baseCard)
          );
          this.lastCard =
            (this.dataInfo.totalCardNumber -
              (this.lastPage - 1) * this.cardCount * this.sysConfig.baseCard) /
            this.sysConfig.baseCard;

          this.page = Math.ceil(
            this.dataInfo.cardNumber /
              (this.cardCount * this.sysConfig.baseCard)
          );
          this.card =
            this.dataInfo.cardNumber -
            (this.page - 1) * this.cardCount * this.sysConfig.baseCard;
          this.smallCard = this.card % this.sysConfig.baseCard;
          console.log(this.card)
            this.card = parseInt(this.card / this.sysConfig.baseCard);

          if (this.card % this.cardCount == 0&&this.card!=0) {
            this.page++;
          }
     
       
        this.setEnergy(this.dataInfo.strengthCount);
        // console.log('12')
        this.initList();
        this.getRankList(); //获取排行榜
      });
    },
    addEnergyByPay() {
      this.fly
        .post("/addStrength", {
          description: "回满体力"
        })
        .then(res => {
          wx.requestPayment({
            timeStamp: res.data.Result.timeStamp,
            nonceStr: res.data.Result.nonceStr,
            package: res.data.Result.package,
            signType: res.data.Result.signType,
            paySign: res.data.Result.paySign,
            success: res => {
              this.isEnergyBox = false;
              this.setEnergy(this.maxEnergy);
            }
          });
        });
    },
    initList() {
      //序列化关卡列表
      //page:2,card:6,smallCard:9
      // 数组有九个元素 ，index < 6-1 通关 ,内关卡 10
      // index=6-1&&smallCard=0; 打开第6个关卡，内关卡0/10
      // 是否通关 complete：true, 小关卡通关
      // 临界状态 关卡数 等于 0 90 180
      // let obj={
      //   complete:false, //通关
      //   lockType:true, //未解锁
      //   innerCard:0, //内关卡数
      //   friendList:[],//预设 当前好友列表
      // }
      this.cardList = [];
      function getObj(c, l, i, o, f) {
        return {
          complete: c,
          lockType: l,
          innerCard: i,
          waitOpen: o,
          friendList: f
        };
      }
      console.log(this.page);
      console.log(this.card);
      console.log(this.smallCard);
      console.log(this.card % this.cardCount)
      if (this.card % this.cardCount == 0) {
        if(this.lockCard!=0){
          this.cardList.push(getObj(false, false, this.smallCard,true, []));
        }else{
          this.cardList.push(getObj(false, false, this.smallCard,false, []));
        }

        for (let i = 0; i < this.cardCount - 1; i++) {
          this.cardList.push(getObj(false, true, 0, false,[]));
        }
        console.log('1')
      } else {
        if (this.lastPage == this.page) {
          // this.$nextTick(()=>{
          this.cardCount = this.lastCard;
        // console.log('2')
          // })
        }
        for (let i = 0; i < this.cardCount; i++) {
          if (i < this.card) {
            this.cardList.push(getObj(true, false, 10, false, []));
          }
          if (i == this.card && this.smallCard == 0) {
            if (this.lockCard == i - 1) {
              this.cardList.push(
                getObj(false, false, this.smallCard, true, [])
              );
            } else {
              this.cardList.push(
                getObj(false, false, this.smallCard, false, [])
              );
            }
          } else if (i == this.card) {
            this.cardList.push(getObj(false, false, this.smallCard, false, []));
          }
          if (i > this.card) {
            this.cardList.push(getObj(false, true, 0, false, []));
          }
        }
      }//end
    },
    play(item, index) {
      if (!item.complete && !item.lockType) {
        //关卡点击处理
        //可以点击关卡
        if (index != this.lockCard) {
          //未解锁关卡
          if (this.energy >= this.sysConfig.baseEnergy) {
            // 调用扣除体力接口
            this.fly
              .post("/updateStrength", {
                count: this.sysConfig.baseEnergy,
                type: 1 //扣
              })
              .then(res => {
                console.log("扣除成功");
              });
              this.isSub = true;
              setTimeout(()=>{
                this.isSub = false;
              },1000)
              this.setEnergy(this.energy - this.sysConfig.baseEnergy);
              // 解锁重新设置 关卡缓存
              wx.setStorage({
                key: "card",
                data: index
              });
              item.waitOpen = false;
              this.store.commit("setCard", index);
              // 进入答题页
              // this.$router.push("/pages/question/mainPlay");
          
          } else {
            // 体力不足 调用弹窗提示
            this.isEnergyBox = true;
          } //--判断体力
        } else {
          this.$router.push("/pages/question/mainPlay");
        } //--是否可点击
      } //--关卡点击处理
    },
    getRankList() {
      this.fly.post("/getRankList").then(res => {
        let allList = res.data.Result;
        allList.forEach((item, index) => {
          let cardNumber;
          let obj = JSON.parse(JSON.stringify(item));
          //直接按照关卡 晒出card
          if (
            item.cardNumber >=
            (this.page - 1) * this.cardCount * this.sysConfig.baseCard
          ) {
            cardNumber =
              item.cardNumber -
              (this.page - 1) * this.cardCount * this.sysConfig.baseCard;
            obj.card = Math.ceil(cardNumber / this.sysConfig.baseCard);

            obj.smallCard = cardNumber % this.sysConfig.baseCard;
            if (obj.card > 0 && cardNumber % this.sysConfig.baseCard == 0) {
              // obj.card = obj.card ;
              obj.smallCard = 10;
            }

            if (obj.card > this.card && obj.card <= 9) {
              this.cardList[obj.card - 1].friendList.push({ obj });
            }
          }
        });
      });
    },
    closeNoEnergy() {
      this.isEnergyBox=false;
    },
    showAddEnergy() {
      this.isAddEnergy = true;
      // this.$router.push('/pages/question/gradeMap');
    },
    showFriendRank(item) {
      console.log("dianji");
      if (item.friendList.length > 0) {
        this.isFriendRank = true;
        this.friednRankList = item.friendList;
      }
    }
  },
  onLoad(options) {
    dataStack.push({ ...this.$data });
  },
  onUnload() {
    Object.assign(this.$data, dataStack.pop());
  },
  onShow() {
    this.getData();
  },
  onShareAppMessage: function(res) {
    let x = Math.ceil(Math.random()*7);
    return {
      title: this.shareInfo[x-1].text,
      imageUrl:this.shareInfo[x-1].url,
      path: "/pages/entry/index?userId=" + this.appInfo.userId + "&subjectId=0",
      success: res => {
        console.log("分享成功");
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-size: 750rpx 1206rpx;
  background-repeat: no-repeat;
  background-color: #fcda7b;
  background-image: url("");
}
.monster {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -337rpx;
  width: 690rpx;
  height: 815rpx;
}
.content {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0 99rpx;
  box-sizing: border-box;
}
.head {
  position: relative;
  padding: 48rpx 0;
  font-size: 72rpx;
  font-weight: bold;
  color: #fff;
  box-sizing: border-box;
  line-height: 1;
  margin-bottom: 27rpx;
}
.energy {
  position: absolute;
  right: -24rpx;
  top: 50%;
  transform: translateY(-50%);
}
.grade-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.grade-item {
  width: 128rpx;
  height: 144rpx;
  border: 6rpx solid #fff;
  border-radius: 8rpx;
  background: #f7d7c6;
  margin-bottom: 120rpx;
  margin-right: 65rpx;
  &:nth-of-type(3n + 3) {
    margin-right: 0;
  }
  position: relative;
}
.grade {
  text-align: center;
  img {
    padding-top: 10rpx;
    width: 100%;
    height: 72rpx;
  }
}
.current {
  width: 112rpx;
  height: 42rpx;
  line-height: 42rpx;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 26rpx;
  background: #e55f80;
}
.tag {
  width: 100%;
  height: 86rpx;
  position: absolute;
  bottom: -86rpx;
  left: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("");
  &:after {
    position: absolute;
    content: "";
    width: 100%;
    opacity: 1;
    height: 5rpx;
    top: 6rpx;
    left: 0;
    background: rgba(#ca5555, 0.5);
  }
}
.passed {
  background-image: url("");
  &:after {
    background: rgba(#81bf4d, 0.5);
  }
}
.wait {
  background-image: url("");
  &:after {
    background: transparent;
  }
}
.wait {
  img {
    width: 37rpx;
    height: 47rpx;
    margin-right: 10rpx;
  }
  font-size: 30rpx;
  color: #fff;
}
.wait-open-tag {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10rpx;
  box-sizing: border-box;
}
.pass,
.lock,
.backward {
  position: absolute;
  top: 24rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 85rpx;
  height: 23rpx;
}
.lock {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ac3d3d;
  border-radius: 50%;
  width: 52rpx;
  height: 52rpx;
  top: 10rpx;
  img {
    width: 24rpx;
    height: 32rpx;
  }
}
.backward {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #fff;
  border-radius: 50%;
  top: 12rpx;
}
.pass-mask {
  background: rgba(#000, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 92rpx;
    height: 86rpx;
  }
}
.lock-mask,
.pass-mask,
.wait-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.wait-mask {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7d7c6;
  img {
    width: 84rpx;
    height: 104rpx;
    animation:shake 1s ease infinite;
  }
}
@keyframes shake {
  0% {transform:  rotate(0deg)}
  20% {transform:  rotate(8deg)}
  40% {transform:  rotate(-8deg)}
}
// @keyframes shake {
//   0% {transform:  rotate(0deg)}
//   5% {transform:  rotate(8deg)}
//   10% {transform:  rotate(-8deg)}
//   15% {transform:  rotate(8deg)}
//   20% {transform:  rotate(-8deg)}
//   // % {transform:  rotate(-8deg)}
// }
</style>
